<template>
    <!-- <div>封堵白名单</div> -->
    <a-row>
      <a-col>
        <a-card :bordered="false" style="margin-bottom: 10px">
          <!-- 查询区域 -->
          
          <div class="table-page-search-wrapper">
            <a-form-model ref="ruleForm" :model="pageFilter" :label-col="labelCol" :wrapper-col="wrapperCol">
                <div style="margin-left:20%">
                    <a-col :span="9">
                <a-form-model-item label="抽检编号">
                    <a-input placeholder="请输入任务名称" v-model="pageFilter.sampNo" />
                </a-form-model-item>
              </a-col>
                <a-col :span="9">
                <a-form-model-item label="抽检类型" style="margin-left:0px">
                  <a-select style="width:100%" v-model="pageFilter.sampType" >
                      <a-select-option v-for="(item, key) in sampType" :key="key" :value="item.value">
                        {{ item.title?item.title:'' }}
                      </a-select-option>
                    </a-select>
                </a-form-model-item>
                </a-col>
              <a-col :span="11">
                <a-form-model-item label="抽检周期"  :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                    <a-radio-group v-model="pageFilter.sampPeriod">
                        <a-radio :value="1">
                            日检
                        </a-radio>
                        <a-radio :value="2">
                            周检
                        </a-radio>
                        <a-radio :value="3">
                            月检
                        </a-radio>
                        <a-radio :value="4">
                            年检
                        </a-radio>
                        <a-radio :value="5">
                            自定义
                        </a-radio>
                    </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col :span="10">
                <a-form-model-item label="抽检范围" >
                    <a-range-picker v-model="pageFilter.time"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="5">
                <a-form-model-item label="范围总量" :label-col="{ span: 7 }" :wrapper-col="{ span: 15 }">
                    <a-input placeholder="请输入任务名称" v-model="pageFilter.totalRange" />
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item label="抽检方式" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                    <a-radio-group v-model="pageFilter.sampMethod">
                        <a-radio :value="1">
                            按比例
                        </a-radio>
                        <a-radio :value="2">
                            按数量
                        </a-radio>
                    </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col :span="5">
                <a-form-model-item label="抽检比例" :label-col="{ span: 7 }" :wrapper-col="{ span: 15 }" style="display:flex">
                    <a-input placeholder="请输入任务名称" v-model="pageFilter.sampProportity"/><span class="icon">%</span>
                </a-form-model-item>
              </a-col>
              <a-col :span="5">
                <a-form-model-item label="抽检数量" :label-col="{ span: 7 }" :wrapper-col="{ span: 15 }">
                    <a-input placeholder="请输入任务名称" v-model="pageFilter.sampQuantity"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="9">
                <a-form-model-item label="移动验证量" >
                    <a-input placeholder="请输入任务名称" v-model="pageFilter.mobVerificationQuantity" />
                </a-form-model-item>
              </a-col>
              <a-col :span="9">
                <a-form-model-item label="移动验证率" >
                    <a-input placeholder="请输入任务名称" v-model="pageFilter.mobVerificationRate" /><span class="icon">%</span>
                </a-form-model-item>
              </a-col>
              <a-col :span="9">
                <a-form-model-item label="联通验证量" >
                    <a-input placeholder="请输入任务名称" v-model="pageFilter.unVerificationQuantity" />
                </a-form-model-item>
              </a-col>
              <a-col :span="9">
                <a-form-model-item label="联通验证率" >
                    <a-input placeholder="请输入任务名称" v-model="pageFilter.jointVerificationRate" /><span class="icon">%</span>
                </a-form-model-item>
              </a-col>
              <a-col :span="9">
                <a-form-model-item label="电信验证量" >
                    <a-input placeholder="请输入任务名称" v-model="pageFilter.telVerificationQuantity" />
                </a-form-model-item>
              </a-col>
              <a-col :span="9">
                <a-form-model-item label="电信验证率" >
                    <a-input placeholder="请输入任务名称" v-model="pageFilter.telVerificationRate" /><span class="icon">%</span>
                </a-form-model-item>
              </a-col>
              <a-col :span="9">
                <a-form-model-item label="抽检人" >
                    <a-input placeholder="请输入任务名称" v-model="pageFilter.sampPerson" />
                </a-form-model-item>
              </a-col>
              <a-col :span="9">
                <a-form-model-item label="抽取时间" >
                    <a-date-picker v-model="pageFilter.extractionTime" style="width:100%" />
                </a-form-model-item>
              </a-col>
              <a-col :span="9">
                <a-form-model-item label="抽检状态" >
                    <a-select style="width:100%" v-model="pageFilter.extarctionStatus" >
                      <a-select-option v-for="(item, key) in extarctionStatus" :key="key" :value="item.value">
                        {{ item.title?item.title:'' }}
                      </a-select-option>
                    </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="9">
                <a-form-model-item label="抽检完成时间" >
                    <a-date-picker v-model="pageFilter.extractionCompTime" style="width:100%" />
                </a-form-model-item>
              </a-col>
                </div>
            </a-form-model>
          </div>
        </a-card>
        <a-card :bordered="false">
          <div>
            <a-button type="primary" @click="extract" style="margin-right:10px" v-if="type != 'Details'">抽取</a-button>
            
            <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="true" :loading="loading"
              :columns="columns" :dataSource="pageData" @selectedRowKey="onSelectedRow" @change="onTableChange">
              <!-- <template slot="order" slot-scope="text, record">
                    <span>{{ pageFilter }}</span>
              </template> -->
            </z-table>
          </div>
          <div style="margin-left:40%;margin-bottom: 10%;margin-top: 50px;">
                <a-button style="margin-right:30px" type="primary" v-if="type != 'Details'" @click="save">保存</a-button>
                <a-button v-if="type != 'Details'" @click="yanzheng">验证</a-button>
        </div>
        </a-card>
      </a-col>
    </a-row>
  </template>
  
  <script>
  import { ViewDetailsUnsealExtraction,modifyUnsealExtraction,unpackingVerification,verification } from '@/api/plugging/Police'
  export default {
    mounted () {
      let id = this.$route.query.id
      this.type = this.$route.query.type
      this.pageFilter.id = id
      if(this.type == 'Details'){ this.onQuery() }
      
    },
    data () {
      return {
        type:'',
        sampType:[
          {
            title:'手工抽检',
            value:0
          },
          {
            title:'系统定时抽检',
            value:1
          },
        ],
        extarctionStatus:[
          {
            title:'待抽取',
            value:'1'
          },
          {
            title:'待验证',
            value:'2'
          },
          {
            title:'已完成',
            value:'3'
          },
        ],
        show:false,
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
        loading: false,
        pageFilter: {
          pageNo: 1,
          pageSize: 10,
        },
        pageData: {},
        columns:[
          {
            title: '序号',
            dataIndex: 'order',
            width: 60,
            align: 'center',
            customRender: (text, record, index) =>
              `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
            // scopedSlots: { customRender: 'order' }
          },
          {
            title: '封堵地址',
            dataIndex: 'fraudUrl',
            align: 'center',
            width:150,
            customRender: (text) => {
            return <j-ellipsis value={text} length={14} />
            },
          },
          {
            title: '数据来源',
            dataIndex: 'dataSource',
            align: 'center',
            width:125,
            customRender:(text) => `${text==1?'kafka数据信息'
            :text==2?'SFTP文件':'涉诈网址上报'}`
          },
          {
            title: '发现时间',
            dataIndex: 'discoveryTime',
            align: 'center',
            width:150,
            customRender: (text) => {
            return <j-ellipsis value={text} length={10} />
            },
          },
          {
            title: '移动验证状态',
            dataIndex: 'mobileBlockingStatus',
            align: 'center',
            width:120,
            customRender:(text) => `${text==1?'未接收'
            :text==2?'待封堵':text==3?'封堵成功':'封堵失败'}`
          },
          {
            title: '移动封堵时间',
            dataIndex: 'mobileBlockingTime',
            align: 'center',
            width:120,
            customRender: (text) => {
            return <j-ellipsis value={text} length={10} />
            },
          },
          {
            title: '联通验证状态',
            dataIndex: 'unicomBlockingStatus',
            align: 'center',
            width:120,
            customRender:(text) => `${text==1?'未接收'
            :text==2?'待封堵':text==3?'封堵成功':'封堵失败'}`
          },
          {
            title: '联通封堵时间',
            dataIndex: 'unicomBlockingTime',
            align: 'center',
            width:120,
            customRender: (text) => {
            return <j-ellipsis value={text} length={10} />
            },
          },
          {
            title: '电信验证状态',
            dataIndex: 'telecomBlockingStatus',
            align: 'center',
            width:120,
            customRender:(text) => `${text==1?'未接收'
            :text==2?'待封堵':text==3?'封堵成功':'封堵失败'}`
          },
          {
            title: '电信封堵时间',
            dataIndex: 'telecomBlockingTime',
            align: 'center',
            width:120,
            customRender: (text) => {
            return <j-ellipsis value={text} length={10} />
            },
          },
          {
            title: '批次号',
            dataIndex: 'batchNo',
            align: 'center',
            width:80,
          },
          

        ]
      }
    },
    methods: {
      save(){
        let a = this.pageFilter.time?this.timestampToTime(this.pageFilter.time[0]):''
        let b = this.pageFilter.time?this.timestampToTime(this.pageFilter.time[1]):''
        let c = this.pageFilter.extractionTime?this.timestampToTime(this.pageFilter.extractionTime):''
        let d = this.pageFilter.extractionCompTime?this.timestampToTime(this.pageFilter.extractionCompTime):''
        this.pageFilter.sampStartScope = a
        this.pageFilter.sampEndScope = b
        this.pageFilter.extractionTime = c
        this.pageFilter.extractionCompTime = d
        // console.log(this.pageFilter);
        // console.log(this.pageData);
        let obj = {
          unsealExtractionList:this.pageData,
          unsealVerification:this.pageFilter
        }
        if(this.type == 'edit'){ obj.id = this.$route.query.id }
        modifyUnsealExtraction(obj).then( res => {
          if (res.success) {
            this.$message.success(res.message)
            this.loading = false
          } else {
            this.$message.success(res.message)
            this.loading = false
          }
        })
          .catch((e) => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
      },
      yanzheng(){
        // console.log(this.pageData);
        let obj = {
          unsealExtractionList:this.pageData
        }
        verification(obj).then( res => {
          if (res.success) {
            this.$message.success(res.message)
            this.loading = false
          } else {
            this.$message.success(res.message)
            this.loading = false
          }
        })
          .catch((e) => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
      },
      extract(){
        let a = this.timestampToTime(this.pageFilter.time[0])
        let b = this.timestampToTime(this.pageFilter.time[1])
        let c = {
          endTime:a,
          startTime:b
        }
        unpackingVerification(c).then( res => {
          if (res.success) {
            this.pageData = res.result ? res.result: {}
            console.log(res.result);
            this.loading = false
          } else {
            this.$message.success(res.message)
            this.loading = false
          }
        })
          .catch((e) => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
      },
     
      onQuery() {
        this.pageFilter.pageNo = 1
        this.refreshTable()
      },
      //重置
      onResetForm() {
        this.pageFilter = {
          pageNo: 1,
          pageSize: 10,
        }
        this.refreshTable()
      },
      onSelectedRow(keys) {
        this.selectKeys = keys
        this.isDisabled = keys.length > 0 ? false : true
      },
      onTableChange(pagination, pageFilter, sorter) {
        let keyMap = { currentPage: 'pageNo' }
        let paginations = Object.keys(pagination).reduce((newData, key) => {
          let newKey = keyMap[key] || key
          newData[newKey] = pagination[key]
          return newData
        }, {})
        this.pageFilter = Object.assign({}, this.pageFilter, paginations)
        this.refreshTable()
      },
      refreshTable() {
        this.loading = true
        ViewDetailsUnsealExtraction(this.pageFilter).then( res => {
          if (res.success) {
            this.pageData = res.result ? res.result.unsealExtractionList : {}
            this.pageFilter = res.result
            if(this.pageFilter.sampStartScope && this.pageFilter.sampEndScope){
            this.pageFilter.time[0] = this.pageFilter.sampStartScope
            this.pageFilter.time[1] = this.pageFilter.sampEndScope}

            this.pageFilter.pageNo = 1
            this.pageFilter.pageSize = 10
            this.loading = false
          } else {
            this.$message.success(res.message)
            this.loading = false
          }
        })
          .catch((e) => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
      },
      timestampToTime(timestamp) {
        if (timestamp === 0 || timestamp == null) {
          return ''
        } else {
          var date = new Date(Date.parse(timestamp))
          var Y = date.getFullYear() + '-'
          var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
          var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
          var H = date.getHours() + ':'
          var M2 = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
          var S = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
          return Y + M + D + H + M2 + S
        }
      }

    }
  }
  </script>
  
  <style lang="less" scoped>
  .search-wrapper-btn {
    position: absolute;
    right: 8%;
    top: 22px;
    z-index: 100;
  }
  /deep/.ant-form-item-children{
    display:flex;
  }
  .icon{
    font-size:15px;
    font-weight: 800;
    border:1px solid #ccc;
    width:2rem;
    height:2rem;
    text-align: center;
    line-height: 2rem;
  }
  /deep/.ant-col-20{
    margin-top:8px
  }
  /deep/.ant-col-18{
    margin-top:8px
  }
  </style>